<!-- 安装 cnpm install mavon-editor --save-->
<!--cnpm install markdown-it --save-->
<template>
  <div>
    <Header></Header>

    <div class="m-container">
      <h2>{{ blog.title }}</h2>
      <el-link icon="el-icon-edit" v-if="isEdit">
        <router-link :to="{name: 'BlogEdit',params: {blogId: blog.id}}">编辑</router-link>
      </el-link>
      <el-divider></el-divider>
      <div class="content markdown-body" v-html="blog.content"></div>
    </div>
  </div>
</template>

<script>
import 'github-markdown-css/github-markdown.css' // 然后添加样式markdown-body
import Header from "@/components/Header"

export default {
  name: "BlogDetail",
  components: {Header},
  data() {
    return {
      blog: {
        id: '',
        title: '',
        content: '',
        userId: ''
      },
      isEdit: false //是否编辑
    };
  },
  methods: {
    getBlog() {
      //从url中获取id
      const blogId = this.$route.params.blogId
      const _this = this
      if (blogId) {
        this.$axios.get('/blog/blog/' + blogId, {
          headers: {'authorization': this.$store.getters.getToken}
        }).then(result => {
          const blog = result.data.data
          _this.blog.id = blog.id
          _this.blog.title = blog.title

          var MarkdownIt = require('markdown-it'),
              md = new MarkdownIt();
          _this.blog.content = md.render(blog.content);
          _this.blog.userId = blog.userId
          _this.isEdit = blog.userId === _this.$store.getters.getUser.id
        })
      }
    },
  },
  created() {
    this.getBlog()
  }
}
</script>

<style scoped>
.m-container {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 100%;
  min-height: 700px;
  padding: 15px 15px;
}


</style>
